<template>
  <div class="three-class-container">
    <search background="linear-gradient(to right, #fc8f04, #f71c19)" />
    <div class="header-container">
      <!-- 导航栏 -->
      <van-tabs v-model="active" class="header-tab" @change="tabChange">
        <van-tab :title="item.name" v-for="(item, index) in tabList" :key="index"></van-tab>
      </van-tabs>
    </div>
    <div class="main-container">
      <van-grid :column-num="3">
        <van-grid-item v-for="(item, index) in shopList" :key="index" :icon="imgUrl + item.indexpic" :text="item.name" @click="itemClick(item)"/>
      </van-grid>
    </div>
  </div>
</template>

<script>
import search from '@components/search'

export default {
  components: { search },
  data() {
    return {
      active: null,
      tabList: [],
      shopList: []
    };
  },
  computed: {
    imgUrl () {
      return this.$imgUrl
    }
  },
  async created () {
    console.log()
    // this.active = this.$route.query.classId
    await this.getTabList()
    await this.getGoodList()
  },
  methods: {
    details (item) {
      this.$router.push({
        path: '/shopping/details',
        query: {
          id: item.id,
          type: 'new'
        }
      })
    },
    tabChange (name) {
      console.log(name)
      this.getGoodList()
    },
    itemClick (item) {
      this.$router.push({
        path: '/classList',
        query: {
          id: item.id,
          name: item.name
        }
      })
    },
    async getTabList () {
      const result = await this.$fetchGet('/home/category/lists', {
        id: this.$route.query.id
      })
      if (!result.success) {
        this.$toast(result.msg)
        return
      }
      this.tabList = result.data.catelists
      this.active = result.data.catelists.findIndex(item => item.id === Number(this.$route.query.classId))
    },
    async getGoodList () {
      const result = await this.$fetchGet('/home/channel/index', {
        pid: this.tabList[this.active].id
      })
      if (!result.success) {
        this.$toast(result.msg)
        return
      }
      this.shopList = result.data.sort
    }
  }
};
</script>

<style lang="scss">
.three-class-container {
  .header-container {
    position: absolute;
    top: 100px;
    .header-tab {
      width: 100vw;
    }
  }
  .main-container {
    margin-top: 205px;
    max-height: calc(100vh - 100px - 100px - 105px);
    overflow-y: auto;
  }
}
</style>